<template>
  <div class="container">
    <div class="left-board">
      <div class="logo-wrapper">
        <div class="logo">
          <img src="@/assets/logo.png" alt="logo"> PageEdit
        </div>
      </div>
      <el-scrollbar class="left-scrollbar">
        <ComponentList @select="addComponent" @clone="activeItem" v-model="componentList"/>
      </el-scrollbar>
    </div>
    <div class="center-board">
      <ExportVueCode class="action-bar" :drawing-list="drawingList" :form-conf="formConf" @empty="empty"/>
      <el-scrollbar class="center-scrollbar">
        <CenterBoard class="center" v-model="drawingList" :formConf="formConf"/>
      </el-scrollbar>
    </div>
    <AttrPanel class="attr-panel" :active-data="activeComponent" :form-conf="formConf" :show-field="!!drawingList.length"/>
  </div>
</template>

<script>
  import ComponentList from './ComponentList'
  import CenterBoard from './CenterBoard'
  import AttrPanel from './AttrPanel'
  import ExportVueCode from './ExportVueCode'
  import { componentListConfig, formConf } from './config'

  export default {
    name: 'Edit',
    components: {
      ComponentList,
      CenterBoard,
      AttrPanel,
      ExportVueCode
    },
    data () {
      return {
        formConf,
        drawingList: [],
        componentList: componentListConfig,
        activeComponent: {}
      }
    },
    methods: {
      empty () {
        this.$confirm('确定要清空所有组件吗？', '提示', { type: 'warning' })
          .then(() => {
            this.drawingList = []
          })
      },
      activeItem (component) {
        this.activeComponent = component
      },
      addComponent (component) {
        this.drawingList.push(component)
        this.activeComponent = component
      }
    }
  }
</script>

<style scoped lang="scss">
  .container {
    ::v-deep .el-scrollbar__wrap {
      box-sizing: border-box;
      overflow-x: hidden !important;
      margin-bottom: 0 !important;
    }
    .left-board {
      width: 260px;
      position: absolute;
      left: 0;
      top: 0;
      height: 100vh;

      .logo-wrapper {
        position: relative;
        height: 42px;
        background: #fff;
        border-bottom: 1px solid #f1e8e8;
        box-sizing: border-box;

        .logo {
          position: absolute;
          left: 12px;
          top: 6px;
          line-height: 30px;
          color: #00afff;
          font-weight: 600;
          font-size: 17px;
          white-space: nowrap;

          > img {
            width: 30px;
            height: 30px;
            vertical-align: top;
          }
        }
      }
    }

    .left-scrollbar {
      height: calc(100vh - 42px);
      overflow: hidden;
    }

    .center-board {
      height: 100vh;
      width: auto;
      margin: 0 350px 0 260px;
      box-sizing: border-box;

      .action-bar {
        position: relative;
        height: 42px;
        text-align: right;
        padding: 0 15px;
        box-sizing: border-box;;
        border: 1px solid #f1e8e8;
        border-top: none;
        border-left: none;
      }

      .center-scrollbar {
        height: calc(100vh - 42px);
        overflow: hidden;
        border-left: 1px solid #f1e8e8;
        border-right: 1px solid #f1e8e8;
        box-sizing: border-box;
        .center{
          padding:12px;
        }
      }
    }
  }
</style>
